<template>
  <div>
    <!--文创&#45;&#45;投票活动-->
    <content-header title="投票活动"></content-header>
    <!--投票列表-->
    <div class="xui-padding-xs xui-margin-top-xs" v-for="(item, index) in listData" :key="index">
      <router-link class="voting-box" :to="{name:'Winchance-vote-detail',params:{id:item.id}}" style="display:block">
        <img-box :imgSrc="item.imgUrl" width="917" height="260"></img-box>
        <span class="voting-mark" :class="voteState(item.stStartTime, item.stEndTime)"></span>
        <span class="vote-btn" v-if="voteState(item.stStartTime, item.stEndTime) === 'voting'"></span>
      </router-link>
    </div>
    <el-pagination
      background
      v-if="page.count"
      layout="prev, pager, next"
      :total="page.count"
      class="xui-margin-top xui-text-center"
      :current-page.sync="page.index"
      :page-size="page.size"
      @current-change="getVoteList">
    </el-pagination>
  </div>
</template>
<script>
import pic from "@/assets/images/example/zhongchou.png";
import votingMark from "@/assets/images/Winchance/voting.png";
import imgBox from "@/components/widge/img-box";
import { getVoteList } from "@/api/vote";
import ContentHeader from "../../../components/widge/content-header";

export default {
  components: {
    ContentHeader,
    imgBox,
    votingMark
  },
  data() {
    return {
      pic,
      listData: [],
      page: {
        index: 1,
        count: null,
        size: 5
      }
    };
  },
  computed: {
    routePath() {
      return this.$route.path;
    }
  },
  methods: {
    voteState(startTime, endTime) {
      var curTime = new Date();
      var startTime = new Date(Date.parse(startTime));
      var endTime = new Date(endTime);
      if (curTime < startTime) {
        return "waiting";
      } else if (curTime >= startTime && curTime <= endTime) {
        return "voting";
      } else if (curTime > endTime) {
        return "end";
      }
    },
    getVoteList() {
      getVoteList(this.page.index, this.page.size).then(res => {
        this.listData = res.data.recordsList;
        this.page.count = res.data.count;
      });
    }
  },
  mounted() {
    this.getVoteList();
  }
};
</script>

<style lang="less" scoped>
.voting-box {
  position: relative;
}

.voting-mark {
  position: absolute;
  top: 20px;
  width: 140px;
  height: 100px;
  display: block;
  background: url("../../../assets/images/Winchance/voting.png") no-repeat left
    top;
}
.voting-mark.end {
  background-position-y: -100px;
}
.voting-mark.waiting {
  background-position-y: -200px;
}

.vote-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 114px;
  height: 35px;
  background: url("../../../assets/images/Winchance/voting-btn.png") no-repeat
    center;
}
</style>
